<template>
  <el-dialog
    v-model="dialogVisible"
    title="设置"
    width="400px"
    :before-close="handleClose"
  >
    <el-form :model="form" label-width="120px" label-position="left">
      <el-form-item label="导出能谱类型：">
        <el-select 
          v-model="form.scanType" 
          placeholder="请选择"
          style="width: 100%"
        >
          <el-option
            v-for="item in scanTypeOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
    </el-form>

    <template #footer>
      <div class="dialog-footer">
        <el-button @click="handleCancel">关闭</el-button>
        <el-button type="primary" @click="handleConfirm">
          确定
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, watch } from 'vue'
import { ElMessage } from 'element-plus'

// Props
const props = defineProps({
  visible: {
    type: Boolean,
    required: true
  },
  defaultType: {
    type: String,
    default: 'abdomen'
  },
  defaultLevel: {
    type: String,
    default: 'L3'
  }
})

// Emits
const emit = defineEmits(['update:visible', 'confirm', 'cancel'])

// Data
const dialogVisible = ref(props.visible)

const form = ref({
  scanType: props.defaultType
})

const scanTypeOptions = [
  { label: '腹部CT', value: 'abdomen' },
  { label: '胸部CT', value: 'chest' }
]

// Watch
watch(() => props.visible, (val) => {
  dialogVisible.value = val
  if (val) {
    // 重置表单
    form.value = {
      scanType: props.defaultType
    }
  }
})

watch(dialogVisible, (val) => {
  emit('update:visible', val)
})

// Methods
const handleClose = () => {
  dialogVisible.value = false
  emit('cancel')
}

const handleCancel = () => {
  dialogVisible.value = false
  emit('cancel')
}

const handleConfirm = () => {
  if (!form.value.scanType) {
    ElMessage.warning('请选择扫描类型')
    return
  }

  emit('confirm', { scanType: form.value.scanType })
  dialogVisible.value = false
  ElMessage.success('设置成功')
}
</script>

<style lang="scss" scoped>
:deep(.el-dialog) {
  border-radius: 8px;
  
  .el-dialog__header {
    padding: 20px 24px;
    border-bottom: 1px solid #ebeef5;
    
    .el-dialog__title {
      font-size: 16px;
      font-weight: 600;
      color: #303133;
    }
  }
  
  .el-dialog__body {
    padding: 30px 24px;
  }
  
  .el-dialog__footer {
    padding: 16px 24px;
    border-top: 1px solid #ebeef5;
  }
}

:deep(.el-form-item__label) {
  font-size: 14px;
  color: #303133;
  font-weight: 500;
}

.dialog-footer {
  display: flex;
  justify-content: center;
  gap: 12px;

  .el-button {
    min-width: 80px;
  }
}
</style>

